import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter,Route } from 'react-router-dom';
import { ListViewPage,RouteLayout } from 'weaver-mobile-page';
import CustomerCard from '../card/Customer';
import ChanceCard from '../card/Chance';

// @inject('customerMapStore')
@withRouter
@observer
export default class CustomerListNormal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      curCustomerId : ""
    }
  }

  componentDidMount() {
    this.props.customerMapStore.getCustomerList();
  }

  render() {
    const { customerMapStore } = this.props;
    const { customerListNormalStore,customerCardLayout } = customerMapStore;
    const {curCustomerId} = this.state;
    return (
        <div>
          <ListViewPage.Normal
              showCheck={false}
              store={customerListNormalStore}
              onRowClick={this.onRowClick.bind(this)}
          />
          <Route
            key={customerCardLayout.id}
            path={customerCardLayout.path}
            render={() => {
              let detailContent = <CustomerCard params={{id:curCustomerId}}/>
              return (
                <RouteLayout getContainer={() => document.getElementById("root")}>
                  <div
                    key="customerCardLayout"
                    className="wm-route-layout"
                  >                    
                    {detailContent}
                  </div>
                </RouteLayout>
              )
            }}
          />
        </div>
    );
  }

  onRowClick(rowData){
    const store = this.props.customerMapStore;
    const {customerId,customerCardLayout} = store;
    this.setState({curCustomerId:rowData.id});
    this.props.history.push(customerCardLayout.path);
  }
}